<template>
  <div class="edit-popup">
    <el-card class="mt-4 !border-none" shadow="never" @tab-click="handleClick">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础信息" name="clientlist">
          <customer-base-form-comp></customer-base-form-comp>
        </el-tab-pane>
        <el-tab-pane label="联系人" name="linkman">
          <addLinkManindex></addLinkManindex>
        </el-tab-pane>
        <el-tab-pane label="申请人" name="proposer">
          <applicantListindex></applicantListindex>
        </el-tab-pane>
        <el-tab-pane label="发明人" name="inventor">
          <inventorListindex></inventorListindex>
        </el-tab-pane>
        <!-- <el-tab-pane label="客户期限规则人" name="customertermrule">
            <customertermruleindex></customertermruleindex>
        </el-tab-pane> -->
        <el-tab-pane label="客户要求" name="customerrequire">
          <customerrequireindex></customerrequireindex>
        </el-tab-pane>
        <!-- <el-tab-pane label="跟进记录" name="second"
  ><clientPhoneindex></clientPhoneindex>
</el-tab-pane> -->
        <el-tab-pane label="客户文件" name="customerfile">
          <clientFileindex></clientFileindex>
        </el-tab-pane>
        <el-tab-pane label="案件信息" name="clientcase">
          <clientcaseindex></clientcaseindex>
        </el-tab-pane>
        <!-- <el-tab-pane label="发文规则配置" name="dispatchruleconfiguration">
            <dispatchruleconfigurationindex></dispatchruleconfigurationindex>
        </el-tab-pane> -->
        <!-- <el-tab-pane label="文件重命名规则" name="lafilerenamingrule">
            <renamingruleindex></renamingruleindex>
        </el-tab-pane> -->
        <!-- <el-tab-pane label="平台用户" name="platformuser">
            <platformuserindex></platformuserindex>
        </el-tab-pane> -->
        <el-tab-pane label="合同信息" name="contract">
          <contractListindex></contractListindex>
        </el-tab-pane>
        <el-tab-pane label="发文记录" name="documentrecord">
          <documentrecordindex></documentrecordindex>
        </el-tab-pane>
        <!-- <el-tab-pane label="客户关联" name="customerrelevance">
            <customerrelevanceindex></customerrelevanceindex>
        </el-tab-pane>
        <el-tab-pane label="竞业关联" name="competitionrelevance">
            <competitionrelevanceindex></competitionrelevanceindex>
        </el-tab-pane>
        <el-tab-pane label="规则邮件配置" name="emailruleconfiguration">
            <ruleconfigurationindex></ruleconfigurationindex>
        </el-tab-pane> -->
        <el-tab-pane label="案件费用" name="causeCost">
          <causeCost></causeCost>
        </el-tab-pane>
        <el-tab-pane label="数据看板" name="causeCost"></el-tab-pane>
        <!-- <el-tab-pane label="企业基础信息" name="enterpriseBasicInformation">
            <enterpriseBasicInformation></enterpriseBasicInformation>
        </el-tab-pane> -->
      </el-tabs>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import causeCost from '../component/causeCost/index.vue'
import addLinkManindex from '../component/linkman/index.vue'
import customerrequireindex from '../component/customerrequire/index.vue'
import applicantListindex from '../component/applicantList/index.vue'
import inventorListindex from '../component/inventorList/index.vue'
import clientcaseindex from '../component/clientcase/index.vue'
import documentrecordindex from '../component/documentrecord/index.vue'
import contractListindex from '../component/contractList/index.vue'
import clientFileindex from '../component/clientFile/index.vue'
import type { FormInstance } from 'element-plus'
import type { PropType } from 'vue'
import feedback from '@/utils/feedback'
import { customerAdd } from '@/api/customer/customer'
import { CUSTOMER_ID } from '@/enums/cacheEnums'
import cache from '@/utils/cache'
import { customerColAdd, customerColEdit } from '@/api/customer/customerColList'
import CustomerBaseFormComp from '@/views/client/clientData/component/customer-base-form-comp.vue'

defineProps({
  dictData: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({})
  }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const mode = ref('add')
const popupTitle = computed(() => {
  return mode.value == 'edit' ? '编辑客户列' : '新增客户列'
})
const activeNames = ['1', '2', '3', '4', '5', '6']
const activeName = 'clientlist'
const route = useRoute()
const router = useRouter()

const caseType = ref<string[]>([])
const options = [
  {
    value: '0',
    label: '专利'
  },
  {
    value: '2',
    label: '商标'
  },
  {
    value: '3',
    label: '版权'
  },
  {
    value: '4',
    label: '科技服务'
  },
  {
    value: '5',
    label: '法律案件'
  },
  {
    value: '6',
    label: '调查案'
  }
]

const customerId = ref(cache.get(CUSTOMER_ID))

const handleSubmit = async () => {
  await formRef.value?.validate()
  const data: any = { ...formData }
  //   mode.value == "edit"
  //     ? await customerlistEdit(data)
  //     : await customerlistAdd(data);
  //  popupRef.value?.close();
  if (route.query.id) {
    await customerColEdit(data)
  } else {
    await customerColAdd(data)
  }
  router.back()
  feedback.msgSuccess('操作成功')
  emit('success')
}

const open = (type = 'add') => {
  mode.value = type
  popupRef.value?.open()
}

const setFormData = async (data: Record<string, any>) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key]
    }
  }
}

const getDetail = async () => {
  const data = await customerlistDetail({
    id: route.query.id
  })
  setFormData(data)
}

// route.query.id && getDetail()

const disabled = ref(false)

const disabledAll = async () => {
  disabled.value = true
  getDetail()
}

const handleClose = () => {
  emit('close')
}

defineExpose({
  open,
  setFormData,
  getDetail
})
</script>
<style scoped>
.formEdit .el-form-item {
  /* width: 590px; */
}

::v-deep .el-collapse-item__header {
  padding-left: 54px;
  background-color: var(--el-bg-color-collapse);
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-collapse);
}

::v-deep .el-collapse-item__wrap {
  padding-top: 20px;
}
</style>
